<!-- src/views/warehousing/entry/entryList.vue -->
<script setup>
import { onMounted, ref } from 'vue';
import EntryAOU from './entryAOU.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getWarehousingEntryPageApi, deleteWarehousingEntryApi, getDetailsApi } from '@/api/warehousingEntry'; // 添加 getDetailsApi
import { getWarehouseListApi } from '@/api/warehouse';

const addOrUpdateRef = ref(null)
const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const entryList = ref([])
const searchForm = ref({
  batchNumber: '',
  status: ''
})
const warehouseList = ref([])
const statusOptions = [
  { label: '未确认', value: 1 },
  { label: '部分已确认', value: 2 },
  { label: '全部确认', value: 3 },
  { label: '拣货中', value: 4 },
  { label: '已上架', value: 5 }
]

const handleDelete = (row) => {
  ElMessageBox.alert('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await deleteWarehousingEntryApi(row.id)
    if(res.code == 1){
      ElMessage.success('删除成功')
      getEntryPage()
    }else{
      ElMessage.error('删除失败')
    }
  }).catch(() => {
  })
}

const handleEdit = async (row) => {
  // 调用接口获取详细数据
  const res = await getDetailsApi(row.id)
  
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '编辑入库单'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.entryForm = JSON.parse(JSON.stringify(row))
  
  // 设置获取到的详细数据
  if (res.code === 1) {
    addOrUpdateRef.value.setSkuData(res.data)
  }
}

const add = () => {
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '新增入库单'
  addOrUpdateRef.value.reset()
}

const reset = () => {
  searchForm.value.batchNumber = ''
  searchForm.value.status = ''
  getEntryPage()
}

const handleSearch = () => {
  page.value = 1
  getEntryPage()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getEntryPage()
}

const handleCurrentChange = (val) => {
  page.value = val
  getEntryPage()
}

const getEntryPage = async () => {
  const res = await getWarehousingEntryPageApi(page.value, pageSize.value)
  entryList.value = res.data.rows
  totalSize.value = res.data.total
}

const formatStatus = (status) => {
  const statusMap = {
    1: '未确认',
    2: '部分已确认',
    3: '全部确认',
    4: '拣货中',
    5: '已上架'
  }
  return statusMap[status] || '未知状态'
}

const getWarehouseList =async () =>{
  const res = await getWarehouseListApi()
  warehouseList.value = res.data
}

onMounted(() => {
  getEntryPage()
  getWarehouseList()
})
</script>

<template>
  <div class="entry-list-container">
    <div class="toolbar">
      <el-button type="primary" icon="Plus" @click="add">添加</el-button>
      
      <div class="search-area">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="批次号">
            <el-input 
              v-model="searchForm.batchNumber" 
              placeholder="请输入" 
              clearable 
              style="width: 180px;"
            />
          </el-form-item>
          
          <el-form-item label="状态">
            <el-select 
              v-model="searchForm.status" 
              placeholder="请选择" 
              clearable 
              style="width: 120px;"
            >
              <el-option 
                v-for="item in statusOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value" 
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-table 
      :data="entryList" 
      style="width: 100%; margin-top: 20px;"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="batchNumber" label="批次号" min-width="120" />
      <el-table-column prop="predictedArrivalTime" label="预测到达时间" min-width="160" />
      <el-table-column prop="warehouseId" label="仓库名称" min-width="120">
        <template #default="scope">
          <span v-for="item in warehouseList" :key="item.id">
            <el-tag v-if="scope.row.warehouseId == item.id" type="primary">{{ item.name }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="consignorName" label="货主名称" min-width="120" />
      
      <el-table-column width="200" label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </div>

    <EntryAOU ref="addOrUpdateRef" @refresh="getEntryPage" />
  </div>
</template>

<style scoped>
.entry-list-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-area {
  display: flex;
  align-items: center;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 15px;
}

.search-form :deep(.el-form-item__label) {
  font-weight: normal;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-area {
    margin-top: 15px;
  }
  
  .search-form {
    flex-wrap: wrap;
  }
  
  .search-form :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}
</style>